<template>
  <div class="material">
    <a-form-model ref="ruleForm" :rules="rules" :model="ruleForm">
      <a-row justify="space-between">
        <a-col :span="8">
          <a-form-model-item has-feedback label="名称" prop="name" :labelCol="{ span: 2 }" :wrapperCol="{ span: 18, offset: 1 }">
            <a-input v-model="ruleForm.name" allow-clear placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8" offset="8" push="5">
          <a-form-model-item>
            <a-space>
              <a-button @click="resetForm('ruleForm')">
                重置
              </a-button>
              <a-button :loading="isLoading" type="primary" @click="submitForm('ruleForm')">
                查询
              </a-button>
            </a-space>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <a-row justify="space-between" class="middle">
      <a-col :span="8">
        <h3>详情列表</h3>
      </a-col>
      <a-col :span="8" offset="8" push="5">
        <a-button type="primary" icon="plus" @click="handleAddMaterial">
          新建素材
        </a-button>
        <util-modules @refresh="refreshData" @densityChange="densityChange" />
      </a-col>
    </a-row>
    <a-table
      @change="handleTableChange"
      :pagination="pagination"
      :rowKey="(record) => record.id"
      :loading="isLoading"
      :columns="columns"
      :data-source="data"
      :size="activeSize"
    >
      <span slot="advertType" slot-scope="_, record">
        <span v-if="record.advertType == 0">互动广告素材</span>
        <span v-if="record.advertType == 2">展示广告素材</span>
      </span>
      <span slot="materialType" slot-scope="_, record">
        <span v-if="record.materialType == 0">普通弹层</span>
        <span v-if="record.materialType == 1">刮刮卡弹层</span>
        <span v-if="record.materialType == 2">三选一弹层</span>
        <span v-if="record.materialType == 3">自定义弹层</span>
      </span>
      <span slot="pic" slot-scope="pic, record">
        <a-popover title="">
          <template slot="content">
            <!-- record.bannerImg -->
            <img
              style="width:200px;height:200px;"
              @click="handleOpenPre(record)"
              :src="`${record.bannerImg !== '-' ? record.bannerImg : record.images['noPrize1']}`"
            />
          </template>
          <img style="width:50px;height:50px;" :src="`${record.bannerImg !== '-' ? record.bannerImg : record.images['noPrize1']}`" />
        </a-popover>
      </span>
      <!-- slot-scope="text, record" -->
      <span slot="action" slot-scope="_, record">
        <!-- <a>Invite 一 {{ record.name }}</a>
        <a-divider type="vertical" /> -->
        <a @click="handleEdit(record.id)">编辑</a>
      </span>
    </a-table>
  </div>
</template>

<script>
import { columns } from './Material'
import { toRoute, getTableSize } from '../../lib/utils'
import UtilModules from '_c/UtilModules.vue'
import { getMaterialList } from '@/api/Advertising/api'
export default {
  name: 'Material',
  components: {
    UtilModules,
  },
  data() {
    return {
      activeSize: '',
      data: [],
      columns,
      isLoading: false,
      ruleForm: {
        name: '',
      },
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'media' }),
      rules: {},
      pagination: {
        defaultPageSize: 100,
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
        showTotal: (total) => `总共  ${total} 条`, // 显示总数
      },
    }
  },
  mounted() {
    this.materialList()
  },
  methods: {
    /**
     * @func 刷新数据
     */
    refreshData() {
      this.materialList()
    },
    /**
     * @func 表格密度
     */
    densityChange(value) {
      const { tableSize } = this.$store.state
      this.activeSize = getTableSize(value, tableSize)
    },
    /**
     * @func 表格改变时
     */
    async handleTableChange(pagination) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.materialList({ pageNo: pagination.current, pageSize: pagination.pageSize })
    },
    /**
     * @func 查询素材列表
     */
    async materialList(name) {
      this.isLoading = true
      try {
        const { list, count } = await getMaterialList({ ...name })
        const pager = { ...this.pagination }
        pager.total = count
        this.isLoading = false
        if (list) {
          this.data = list ?? []
        }
        this.pagination = pager
      } catch (err) {
        this.isLoading = false
        this.$msgErr(err.message)

      }
    },
    /**
     * 查询数据
     */
    submitForm() {
      this.materialList(this.ruleForm)
    },
    /**
     * 重置表单
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.materialList()
    },
    /**
     * 新建素材
     */
    handleAddMaterial() {
      toRoute(this, `material-create`)
    },
    /**
     * 图片预览
     */
    handleOpenPre(record) {
      // const images = [record.bannerImg] || record.images['noPrize1']
      const images = record.bannerImg !== '-' ? [record.bannerImg] : [record.images['noPrize1']]
      this.$viewerApi({
        images,
      })
    },
    /**
     * 编辑详情
     */
    handleEdit(id) {
      toRoute(this, `material-edit?id=${id}`)
    },
  },
  filters: {},
  watch: {},
  computed: {},
}
</script>
<style lang="scss" scoped>
.middle {
  margin-bottom: 20px;
}
</style>
